<template>
    <view class="canvasView">
        <view class="echarts">
            <mpvue-echarts :onInit="lineInit" canvasId="line" ref="lineChart"/>
        </view>
    </view>
</template>

<script>
import * as echarts from "../../components/echarts/echarts.simple.min.js";
import mpvueEcharts from "../../components/mpvue-echarts/src/echarts.vue";
let lineOption = {
    title: {
        text: "BHT走势图"
    },
    textStyle: {
        color: "#fff",
        fontStyle: "normal",
        fontSize: 6
    },
    color: ["#1dd445"],
    grid: [
        {
            top: "30",
            left: "50"
        }
    ],
    tooltip: {
        trigger: "axis",
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: "category",
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
        maxInterval: 3600 * 24 * 1000,
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 8
            },
            // rotate: 50,
            formatter: function(day) {
                let cDate = new Date(day);
                let year = cDate.getFullYear();
                let month = cDate.getMonth() + 1;
                let date = cDate.getDate();
                let hours = cDate.getHours();
                let minute = cDate.getMinutes();
                let second = cDate.getSeconds();

                return (
                    (month > 9 ? month : "0" + month) +
                    "-" +
                    (date > 9 ? date : "0" + date) +
                    "\n" +
                    year
                );
            }
        },
        data: []
    },
    yAxis: {
        type: "value",
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        // min: 0.2,
        // max: 2,
        // interval: 0.2, //间隔
        // minInterval: 0.2,
        splitLine: {
            show: true,
            lineStyle: {
                color: ["#fff"],
                width: 1,
                type: "solid"
            }
        },
        axisLabel: {
            textStyle: {
                fontSize: 8
            }
        },
        lineStyle: {
            color: "#1dd445"
        }
    },
    series: [
        {
            type: "line",
            showSymbol: false,
            smooth: true,
            hoverAnimation: false,
            data: []
        }
    ]
};

export default {
    components: {
        mpvueEcharts
    },
    props: {
        price: {
            type: Number
        }
    },
    data() {
        return {};
    },
    onShow() {},
    computed: {},
    methods: {
        setLineOption(data) {
            data = data.reverse();

            let dataLen = data.length;
            let seriesData = [];
            let xAxiasData = [];
            // 记录数据的最后一条
            let lastDate = null;
            let lastPrice = 0;
            let currentCount = 7;

            for (var i = 0; i < currentCount; i++) {
                if (i < dataLen) {
                    if (lastDate !== null) {
                        if (this.compareDay(lastDate, data[i].date)) {
                            currentCount++;
                        }
                    }
                    seriesData.push(data[i].price);
                    xAxiasData.push(this.getCurrentDay(data[i].date));
                    lastPrice = data[i].price;
                    lastDate = data[i].date;
                } else {
                    seriesData.push(lastPrice);
                    xAxiasData.push(
                        this.getCurrentDay(lastDate, -(i - dataLen + 1))
                    );
                }
            }

            console.log(seriesData);
            console.log(xAxiasData);
            lineOption.series[0].data = seriesData.reverse();
            lineOption.xAxis.data = xAxiasData.reverse();
            console.log(lineOption)

            // lineOption.yAxis.min = price / 2;
            // lineOption.yAxis.max = price * 2;
            // lineOption.yAxis.interval = price / 10;
        },
        // 比较两个数据是不是同一天
        compareDay: function(day1, day2) {
            let cDate1 = new Date(day1);
            let cDate2 = new Date(day2);
            return (
                cDate1.getFullYear() === cDate2.getFullYear() &&
                cDate1.getMonth() === cDate2.getMonth() &&
                cDate1.getDate() === cDate2.getDate()
            );
        },
        getCurrentDay: function(day, i) {
            var dd = new Date(day);
            if (i) dd.setDate(dd.getDate() + i); //获取AddDayCount天后的日期
            var y = dd.getFullYear();
            var m = 
                dd.getMonth() + 1 < 10
                    ? "0" + (dd.getMonth() + 1)
                    : dd.getMonth() + 1; //获取当前月份的日期，不足10补0
            var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
            var h = dd.getHours() < 10 ? "0" + dd.getHours() : dd.getHours(); //获取当前几号，不足10补0
            var minute =
                dd.getMinutes() < 10 ? "0" + dd.getMinutes() : dd.getMinutes(); //获取当前几号，不足10补0
            var second =
                dd.getSeconds() < 10 ? "0" + dd.getSeconds() : dd.getSeconds(); //获取当前几号，不足10补0
            return (
                y + "/" + m + "/" + d +' '+h+':'+minute+':'+second
            );
            // return new Date(new Date(day) - 24 * i * 60 * 60 * 1000);
        },
        // formatDate: function(day) {
        //     let cDate = new Date(day);
        //     let year = cDate.getFullYear();
        //     let month = cDate.getMonth() + 1;
        //     let date = cDate.getDate();
        //     let hours = cDate.getHours();
        //     let minute = cDate.getMinutes();
        //     let second = cDate.getSeconds();

        //     return (
        //         year +
        //         (month > 9 ? month : "0" + month) +
        //         "-" +
        //         (date > 9 ? date : "0" + date) +
        //         "\n" +
        //         (date > 9 ? date : "0" + date) +
        //         ":" +
        //         (date > 9 ? date : "0" + date) +
        //         ":" +
        //         (date > 9 ? date : "0" + date)
        //     );
        // },
        lineInit(canvas, width, height) {
            echarts.setCanvasCreator(() => canvas);
            let lineChart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            canvas.setChart(lineChart);

            lineChart.setOption(lineOption);
            return lineChart;
        },
        lineChartInit() {
            this.$refs.lineChart.init();
        },
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let h = date.getHours();
            let minute = date.getMinutes();

            if (type === "start") {
                year = year - 10;
            } else if (type === "end") {
                // year = year + 2;
            }
            month = month > 9 ? month : "0" + month;
            day = day > 9 ? day : "0" + day;
            h = h > 9 ? h : "0" + h;
            minute = minute > 9 ? minute : "0" + minute;
            return `${year}-${month}-${day}`;
        }
    }
};
</script>

<style scoped lang="scss">
.canvasView {
    width: 100%;
    height: 500upx;
    background-color: #3e527e;
    .echarts {
        position: relative;
        height: 100%;
        &-title {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: center;
            font-size: 22upx;
            color: #222222;
        }
    }
}
</style>
